#load-save.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Load and save editor text
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | &times;
      .modal-body
        .card
          .card-header
            ul.nav.nav-tabs.card-header-tabs(role="tablist")
              li.nav-item(role="presentation"): a.nav-link.active(href="#load-examples" role="tab" data-toggle="tab") Examples
              li.nav-item(role="presentation"): a.nav-link(href="#load-browser-local" role="tab" data-toggle="tab") Browser-local storage
              li.nav-item(role="presentation"): a.nav-link(href="#load-browser-local-history" role="tab" data-toggle="tab") Browser-local history
              li.nav-item(role="presentation"): a.nav-link(href="#load-file-system" role="tab" data-toggle="tab") File system
          .card-body.tab-content
            #load-examples.tab-pane.active(role="tabpanel")
              h4.card-title Load from examples:
              ul.examples.small-v-scrollable
                li.template: a(href="javascript:;")
            #load-browser-local.tab-pane(role="tabpanel")
              h4.card-title Load from browser-local storage:
              ul.local-storage.small-v-scrollable
                li.template: a(href="javascript:;")
              .input-group
                input.save-name(type="text" size="20" placeholder="Set name of state")
                .input-group-append
                  button.btn.btn-light.save-button(type="button") Save to browser-local storage
            #load-browser-local-history.tab-pane(role="tabpanel")
              h4.card-title Load from browser-local history:
              ul.local-history.small-v-scrollable
                li.template: a(href="javascript:;")
            #load-file-system.tab-pane(role="tabpanel")
              h4.card-title Load/save to your system
              label.btn.btn-outline-secondary.btn-file(role="button") Load from a local file
                input.local-file(type="file")
              label.btn.btn-outline-secondary.btn-file.save-btn(role="button") Save to file
                input.save-file(type="button")
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal" aria-label="Close") Close

#alert.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Something alert worthy
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | &times;
      .modal-body
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal") Close

#yes-no.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Well, do you or not?
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | &times;
      .modal-body
      .modal-footer
        button.btn.btn-light.no(type="button" data-dismiss="modal") No
        button.btn.btn-light.yes(type="button" data-dismiss="modal") Yes

#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Compiler Explorer Settings
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | &times;
      .modal-body
        .card
          .card-header
            | These settings control how Compiler Explorer acts for you. They are not
            | preserved as part of shared URLs, and are persisted locally using browser
            | local storage.
          .card-body
            .card-title
              h4 Site behaviour
            .form-group(role="group")
              label
                | Default language&nbsp;
                small
                  span.fas.fa-info-circle(title="New editors only (Reset UI to clear yours)" aria-label="New editors only (Reset UI to clear yours)")
                select.defaultLanguage
              .checkbox
                label
                  input.allowStoreCodeDebug(type="checkbox")
                  | Allow my source code to be temporarily stored for diagnostic purposes in the event of an error
              div
                label
                  | Theme&nbsp;
                  select.theme
              .checkbox
                label
                  input.newEditorLastLang(type="checkbox")
                  | Use last selected language when opening new Editors
              .checkbox
                label
                  input.enableCommunityAds(type="checkbox")
                  | Show community events
        .card
          .card-body
            .card-title
              h4 Keybindings
            .form-group(role="group")
              .checkbox
                label
                  input.useVim(type="checkbox")
                  | Vim
        .card
          .card-body
            .card-title
              h4 Editor
            .form-group(role="group")
              div
                label
                  | Desired Font Family in editors
                input.editorsFFont(type="text" style="width:100%")
              .checkbox
                label
                  input.editorsFLigatures(type="checkbox")
                  | Enable font ligatures
              .checkbox
                label
                  input.autoCloseBrackets(type="checkbox")
                  | Automatically insert matching brackets and parentheses
              .checkbox
                label
                  input.autoIndent(type="checkbox")
                  | Automatically indent code (reload page after changing)
              .checkbox
                label
                  input.hoverShowSource(type="checkbox")
                  | Highlight linked code lines on hover
              .checkbox
                label
                  input.hoverShowAsmDoc(type="checkbox")
                  | Show asm description on hover
              .checkbox
                label
                  input.showQuickSuggestions(type="checkbox")
                  | Show quick suggestions
              .checkbox
                label
                  input.useCustomContextMenu(type="checkbox")
                  | Use custom context menu
              .checkbox
                label
                  input.showMinimap(type="checkbox")
                  | Show editor minimap
              .checkbox
                label
                  input.keepSourcesOnLangChange(type="checkbox")
                  | Keep editor source on language change
              .checkbox
                label
                  input.useSpaces(type="checkbox")
                  | Use spaces for indentation
              div
                label
                  | &nbsp;Tab width&nbsp;
                  input.tabWidth(type="numeric")
              div
                label
                  | Format based on&nbsp;
                  select.formatBase
              .checkbox
                label
                  input.enableCtrlS(type="checkbox")
                  | Make
                  kbd Ctrl
                  | +
                  kbd S
                  | &nbsp;save to local file instead of creating a share link
              .checkbox
                label
                  input.wordWrap(type="checkbox")
                  | Enable Word Wrapping
        .card
          .card-body
            .card-title
              h4 Compilation
            .form-group(role="group")
              div
                .checkbox
                  label
                    input.compileOnChange(type="checkbox")
                    | Compile automatically when source changes
                div Delay before compiling:&nbsp;
                  b 0.25s&nbsp;
                  .slider.slider-horizontal.delay
                  b &nbsp;3s
              .checkbox
                label
                  input.colourise(type="checkbox")
                  | Colourise lines to show how the source maps to the output
              label
                | Colour scheme&nbsp;
                select.colourScheme
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal") Close

#simplecook.gl_keep(tabindex="-1" role="dialog" style="display:none")
  .message
    .btn-group.btn-group-sm
      button.btn.btn-light.btn-sm.cookies(title="Read cookie policy" aria-label="Read new cookie policy")
        span.fas.fa-info-circle
        | &nbsp;Read the new cookie policy
      p.new-cookie-msg Compiler Explorer uses cookies and other related techs to serve you
    .btn-group.btn-group-sm(role="group" aria-label="Consent options" style="float:right")
      button.btn.btn-light.btn-sm.cook-do-consent.consent-cookie-yes(title="Consent cookie policy" aria-label="Consent cookie policy")
        span.fas.fa-thumbs-up
        | &nbsp;Consent
      button.btn.btn-light.btn-sm.cook-dont-consent.consent-cookie-no(title="Do not consent cookie policy" aria-label="Oppose cookie policy")
        span.fas.fa-thumbs-down
        | &nbsp;Don't consent

#notifications

#shareembedlink.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title Share embedded
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | &times;
      .modal-body
        .card
          .card-body
            .input-group-append
              input.form-control.input-sm.permalink(type="text" placeholder="Loading" readonly size="1024" style="font-size: 10px")
              button.input-group-btn.btn.btn-outline-secondary.btn-sm.clippy(type="button" data-clipboard-target="#shareembedlink .permalink" title="Copy to clipboard")
                span.fa.fa-clipboard
            #embedsettings.form-group(role="group")
              .checkbox
                label
                  input.readOnly(type="checkbox")
                  | Read Only
              .checkbox
                label
                  input.hideEditorToolbars(type="checkbox")
                  | Hide Editor Toolbars

#history.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        h5.modal-title History
        button.close(type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close")
          span(aria-hidden="true")
            | &times;
      .modal-body
        .card
          .card-body
            ul.nav.nav-tabs(role="tablist")
              li.nav-item
                a.nav-link.active(data-toggle="tab" role="tab" href="#load-history" aria-controls="load-history" aria-selected="true")
                  | History
              li.nav-item
                a.nav-link(data-toggle="tab" role="tab" href="#load-history-diff-display" aria-controls="load-history-diff-display" aria-selected="false")
                  | Diff

            div.tab-content#historyTabs(style="height:600px;overflow-y:scroll")
              div.tab-pane.show.active#load-history(role="tabpanel")
                ul.historiccode
                  li.template
                    input.base(type="radio" name="base")
                    input.comp(type="radio" name="comp")
                    | &nbsp;
                    a(href="javascript:;")
              div.tab-pane#load-history-diff-display(role="tabpanel")
                .checkbox
                  label.control-label(for="inline-diff-checkbox")
                    input.inline-diff-checkbox(type="checkbox" value="")
                    | Inline diff
                div.monaco-placeholder#history-diff
      .modal-footer
        button.btn.btn-light(type="button" data-dismiss="modal" aria-label="Close") Close
